<script setup lang="ts">
import { reqGetStatistics1, reqGetStatistics2_bak as reqGetStatistics2, type IPanels } from '@/api/index'

const panels1 = ref<IPanels[]>([])
const goods = ref<{ label: string; value: number }[]>([])
const orders = ref<{ label: string; value: number }[]>([])
async function getStatistics1() {
  const result1 = await reqGetStatistics1()
  const result2 = await reqGetStatistics2()
  // const result3 = await reqGetStatistics3({ type: 'month' })
  // console.log(result2)
  if (result1.msg === 'ok') {
    panels1.value = result1.data.panels
    // 假设 result2.data 是一个对象，包含 goods 和 order 属性
    type ResultData = {
      goods: { label: string; value: number }[]
      order: { label: string; value: number }[]
    }
    // @ts-ignore
    const resultData = result2.data as ResultData
    goods.value = resultData.goods
    orders.value = resultData.order
  }
}
onMounted(() => {
  getStatistics1()
})
</script>

<template>
  <div class="f-body">
    <el-row :gutter="20">
      <template v-if="panels1.length == 0">
        <el-col :span="6" v-for="i in 4" :key="i">
          <el-skeleton style="width: 100%" animated loading>
            <template #template>
              <el-card shadow="hover">
                <template #header>
                  <div class="text-title">
                    <el-skeleton-item variant="text" style="width: 50%" />
                    <el-skeleton-item variant="text" style="width: 10%" />
                  </div>
                </template>
                <div style="height: 64px">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                </div>
                <template #footer>
                  <div class="text-title">
                    <el-skeleton-item variant="text" style="width: 50%" />
                    <el-skeleton-item variant="text" style="width: 10%" />
                  </div>
                </template>
              </el-card>
            </template>
          </el-skeleton>
        </el-col>
      </template>
      <el-col :span="6" v-for="(item, index) in panels1" :key="index">
        <el-card shadow="hover">
          <template #header>
            <div class="text-title">
              <span>{{ item.title }}</span>
              <el-tag :type="item.unitColor || 'info'">{{ item.unit }}</el-tag>
            </div>
          </template>
          <div class="text-main">{{ item.value }}</div>
          <template #footer>
            <div class="text-title">
              <span>{{ item.subTitle }} </span>
              <span>{{ item.subValue }} </span>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <IndexNavs />
    <div class="row2" style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="12">
          <IndexTip title="店铺及商品提示" tip="店铺及商品提示" :btns="goods" />

          <IndexTip title="交易提示" tip="需要立即处理的交易订单" :btns="orders" />
        </el-col>
        <el-col :span="12">
          <!-- echart 图表 -->
          <IndexChart v-permission="['getStatistics3,GET']" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.f-body {
  margin: 0 10px;
  .text-title {
    color: #6b7280;
    display: flex;
    justify-content: space-between;
  }
  .text-main {
    color: #6b7280;
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
  }
}
</style>
